/*
  学习目标：React中JSX- 插值表达式 - 引用类型
  变量 
  ✅基础类型：string number boolean null undefined
  ✅引用类型：数组对象、
    对象：直接报错
    数组：每项元素都会当做一个个的DOM节点渲染
*/

import React from 'react';
import ReactDOM from 'react-dom';

const obj = {
  type: 'zs',
  childre: 18,
  props: {
    a: '123',
  },
};

const lis1 = [<div>React</div>, <div>Vue</div>, <div>JS</div>];

const divNode = (
  <div>
    {/* 1.💥 对象不能在JSX-插值表达式中使用 */}
    {/* <h1>{obj.type}</h1> */}

    <h2>
      <div>React</div>
      <div>Vue</div>
      <div>JS</div>
    </h2>
    {/* 2. 💥数组：每项元素都会当做一个个的DOM节点渲染 */}
    <h2>{lis1}</h2>
    <h3>123</h3>
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
